<script setup>
import {onMounted, reactive, ref} from "vue";
import {getMainPageData, getStudentActivities} from "@/api/getData.js";
import {useStore} from "vuex";

//vuex
const store = useStore();
//获取学校通知
const datas = reactive([]);
const getNews=()=>{
  getMainPageData().then(res=>{
    console.log('newsres',res);
    datas.splice(0, 10, ...res.datas);
    console.log('datas',datas)
  })
}

//学生活动
const acts = reactive([]);
const getStudentAct= ()=>{
  getStudentActivities().then(res=>{
    console.log('activities',res.datas)
    acts.splice(0, acts.length, ...res.datas);
  })
}
onMounted(()=>{
  getNews();
  getStudentAct();
})

//发布学校通知
function publishNotice(data){
  console.log(data)
  alert('通知发布成功');
  store.dispatch('getNotice/addNotification', data);
  deleteNotice(data);
}
//删除学校通知
function deleteNotice(data){
  // store.dispatch('getNotice/deleteNotification', data.id);

  const index = datas.findIndex(item => item.id === data.id);
  if (index !== -1) {
    // 在数组中删除该通知项
    datas.splice(index, 1);
  }
}

//发布学生活动
function publishStudentAct(act){
  alert('活动发布成功');
  store.dispatch('getAct/addActification', act);
  deleteStudentAct(act);
}
//删除学生活动
function deleteStudentAct(act){
  // store.dispatch('getAct/deleteActification',act.id)
  const index = acts.findIndex(item => item.id === act.id);
  if (index !== -1) {
    // 在数组中删除该通知项
    acts.splice(index, 1);
  }
}
</script>
<template>
  <div class="container">
    <section class="section">
      <h1 class="section-title">学校通知信息</h1>
      <ul class="card-list">
        <li v-for="data in datas.slice(0, 10)" :key="data.id" class="card">
          <div class="card-content">
            <!--            <p>{{ data.title }}</p>-->
            <!--            <p>{{ data.content }}</p>-->
            <span>{{ data.title }} : {{ data.content }}</span>
          </div>
          <div class="card-actions">
            <el-button class="whz" type="primary" icon="el-icon-edit" @click="publishNotice(data)">发布</el-button>
            <el-button class="whz" type="danger" icon="el-icon-delete" @click="deleteNotice(data)">删除</el-button>
          </div>
        </li>
      </ul>
    </section>

    <section class="section">
      <h1 class="section-title">学生活动</h1>
      <ul class="card-list">
        <li v-for="act in acts" :key="act.id" class="card">
          <div class="card-content">
            <p>{{ act.description }}</p>
          </div>
          <div class="card-actions">
            <el-button class="whz" type="primary" icon="el-icon-edit" @click="publishStudentAct(act)">发布</el-button>
            <el-button class="whz" type="danger" icon="el-icon-delete" @click="deleteStudentAct(act)">删除</el-button>
          </div>
        </li>
      </ul>
    </section>
  </div>
</template>

<style scoped>
.container {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.section {
  flex: 1;
  max-width: 10000px;
}

.section-title {
  text-align: center;
  margin-bottom: 10px;
}

.card-list {
  list-style: none;
  padding: 0;
}

.card {
  background-color: #f0f0f0;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 10px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.card-content {
  margin-bottom: 10px;
}

.card-actions {
  display: flex;
  justify-content: space-between;
}
.whz {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #999;
  border-radius: 4px;
  height: 38px;
  width: 60px;
}


</style>

<!--<template>-->
<!--  <h1 style="text-align: center">学校通知信息</h1>-->
<!--  <ul class="infinite-list" style="overflow: auto">-->
<!--    <li v-for="data in datas.slice(0, 10)" :key="data.id" class="infinite-list-item">-->
<!--      <div class="item-content">-->
<!--        {{data.title}} : {{data.content}}-->
<!--      </div>-->
<!--      <div class="item-buttons">-->
<!--        <el-button @click="publishNotice(data)">发布通知</el-button>-->
<!--        <el-button @click="deleteNotice(data)">删除</el-button>-->
<!--      </div>-->
<!--    </li>-->
<!--  </ul>-->

<!--  <h1 style="text-align: center">学生活动</h1>-->
<!--  <ul class="infinite-list" style="overflow: auto">-->
<!--    <li v-for="act in acts" :key="act.id" class="infinite-list-item">-->
<!--      <div class="item-content">-->
<!--        {{act.description}}-->
<!--      </div>-->
<!--      <div class="item-buttons">-->
<!--        <el-button @click="publishStudentAct(act)">发布活动</el-button>-->
<!--        <el-button @click="deleteStudentAct">删除</el-button>-->
<!--      </div>-->
<!--    </li>-->
<!--  </ul>-->
<!--</template>-->

<!--<style scoped>-->
<!--.infinite-list {-->
<!--  height: 400px;-->
<!--  padding: 0;-->
<!--  margin: 0;-->
<!--  list-style: none;-->
<!--}-->
<!--.infinite-list .infinite-list-item {-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  justify-content: center;-->
<!--  height: 50px;-->
<!--  background: var(&#45;&#45;el-color-primary-light-9);-->
<!--  margin: 10px;-->
<!--  padding-left: 40px;-->
<!--  color: var(&#45;&#45;el-color-primary);-->
<!--}-->
<!--.infinite-list .infinite-list-item + .list-item {-->
<!--  margin-top: 10px;-->
<!--}-->

<!--.item-content {-->
<!--  flex: 1; /* 让内容部分自动占据剩余空间 */-->
<!--}-->

<!--.item-buttons {-->
<!--  display: flex;-->
<!--}-->
<!--</style>-->
